

<!-- 水券余额 -->
<template>
	<view class="content">
		
		<view class="bg">
			<view class="card">
				<view class="left">
					<view>
						<view class="price">{{userInfo.sj_num / 100}}</view>
						<view class="detail">水券余额(元）</view>
					</view>
				</view>
				<view class="right">
					<view class="btn borderOneRpx" @click="toDetail">交易明细</view>
				</view>
			</view>
			<view class="title">充值金额</view>
			
			
			<view @click="rechargeIndex = index" v-for="(item, index) in rechargeList" :key="index" class="block">
				<view class="name">
					充
					<text>{{item.crRechargeAmount / 100}}</text>
					元
				</view>
				<view class="send">到账{{(item.crRechargeAmount + item.crGiveAmount) / 100}}元</view>
				<view class="img">
					<image src="/static/images/waterCoupon/sel.png" v-if="index == rechargeIndex"></image>
					<image src="/static/images/waterCoupon/empty.png" v-else></image>
				<view v-if="item.crGiveLevelName">送{{item.crGiveLevelName}}</view>
				</view>
			</view>
			
			<!-- <view class="block">
				<view class="name-c">
					其他金额
				</view>
				<view class="send-c">
					<view class="input">
						<input v-model="customAmount" :disabled="rechargeIndex != -999" placeholder="自定义充值金额不参与优惠" maxlength="8" type="number" />
					</view>
				</view>
				<view class="img" style="width: 140rpx;">
					<image src="/static/images/waterCoupon/sel.png" v-if="-999 == rechargeIndex"></image>
					<image src="/static/images/waterCoupon/empty.png" @click="rechargeIndex = -999" v-else></image>
				</view>
			</view> -->
		</view>
		
		<!-- 发票信息 -->
		<view @click="gotoSelectInvoicePage()" class="oneItem-Container invoice-Container">
			<view class="item-label">发票信息</view>
			<view class="item-operate selectInvoice-Container">
				<view v-if="invoiceInfo != null" class="unSelectText selectedText">
					{{invoiceInfo.cidType | cidTypeFormate}}
				</view>
				<view v-else class="unSelectText">
					不需要发票
				</view>
				<image class="selectInvoice" :src="icon.selectInvoice"></image>
			</view>
		</view>
		
		<button class="add-btn" @click="submitOrder()">立即充值</button>
		<view class="tip" @click="toRichtext('6')">充值即代表同意<text>《构购充值协议》</text></view>
		<view class="tip" style="margin-bottom: 116rpx; ">*水券充值金额不可提现</view>
	</view>
</template>

<script>
export default {
	filters: {
		
		//发票类型格式化
		cidTypeFormate: function(cidType) {
			var cidTypeName = "";
			switch(parseInt(cidType)) {
				case 1:
					cidTypeName = "普通纸质发票";
					break;
				case 2:
					cidTypeName = "普通电子发票";
					break;
				case 3:
					cidTypeName = "增值税纸质发票";
					break;
				case 4:
					cidTypeName = "增值税电子发票";
					break;
			}
			
			return cidTypeName || "不需要发票";
		}
	},
	data() {
		return {
			icon: {
				selectInvoice: "/static/images/order/selectInvoice.png"
			},
			userInfo:{
				sj_num: 0
			},
			
			customAmount: '',
			rechargeIndex: 0,
			rechargeList: [],
			
			//发票信息
			invoiceInfo: null
		};
	},
	onShow() {
		let that = this;
		that.$api.globalUtil.requestAjax({
			url: '/AccountBalanceApi/findAccountBalanceByCustomerIdForApi',
			method: 'POST',
			data: {},
			success: function(res) {
				that.userInfo.sj_num = that.changeTwoDecimal_f(res.data.response.waterBalance);
			}
		});
		
		//充值列表查询
		this.rechargeList_fun();
	},
	methods: {
		
		// 交易明细
		toDetail(){
			uni.navigateTo({
				url: 'detailed?type=shuijuan'
			});
		},
		
		
		// 小数后两位，补0
		changeTwoDecimal_f(x) {
			var f_x = parseFloat(x);
			if (isNaN(f_x)) {
				this.$api.msg('余额格式错误');
				return false;
			}
			var f_x = Math.round(x * 100) / 100;
			var s_x = f_x.toString();
			var pos_decimal = s_x.indexOf('.');
			if (pos_decimal < 0) {
				pos_decimal = s_x.length;
				s_x += '.';
			}
			while (s_x.length <= pos_decimal + 2) {
				s_x += '0';
			}
			return s_x;
		},
		
		
		// 富文本跳转
		toRichtext(type) {
			uni.navigateTo({
				url: '/pagesUser/userRichtext?type=' + type
			});
		},
		
		
		// 充值列表查询
		rechargeList_fun() {
			
			var that = this;
			that.$api.globalUtil.requestAjax({
				url: '/customerRechargeApi/customerRechargeList',
				method: "POST",
				data: {
					type: 2 //充值类型：1,余额 2,水券
				},
				success: function(res) {
					if(res.data.success) {
						that.rechargeList = res.data.response;
					}
				}
			});
		},
		
		
		//选择发票
		gotoSelectInvoicePage() {
			uni.navigateTo({
				url: "/pagesUser/invoice/select"
			});
		},
		
		//选择发票回调
		selectInvoiceHandler(invoiceInfo) {
			this.invoiceInfo = invoiceInfo;
		},
		
		
		//提交订单
		submitOrder() {
			
			// 自定义金额校验
			if(this.rechargeIndex == -999) {
			
				if(!this.customAmount || this.customAmount == 0) {
					this.$api.msg('请输入有效金额');
					return ;
				}
				var isNum = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
				if(!isNum.test(this.customAmount)) {
					this.$api.msg('请输入有效金额');
					return ;
				}
			}
			
			
			let that = this;
			var payModule = "waterBalance";
			var payAmount = 0;
			var payApiUrl = {
				wxPay: "/PayApi/wxPayRechargeForApi",
				aliPay: "/PayApi/alipayRechargeForApi"
			};
			var payData = {
				accountType: 3, //2.余额充值，3.水券充值
				customerInvoiceId: that.invoiceInfo ? that.invoiceInfo.cfId : "",
				cidType: that.invoiceInfo ? that.invoiceInfo.cidType : "",
				cidEmail: that.invoiceInfo ? that.invoiceInfo.ciEmail : ""
			};
			
			payData["aliPayWap"] = "NO";
			payData["aliPayApp"] = "YES";
			
			if(that.rechargeIndex == -999) {
				payAmount = that.customAmount * 100;
				payData["rechargeAccount"] = that.customAmount * 100;
			}else {
				payAmount = that.rechargeList[that.rechargeIndex].crRechargeAmount;
				payData["customerRechargeId"] = that.rechargeList[that.rechargeIndex].crId;
			}
			
			uni.navigateTo({
				url: "/pagesUser/payment?payModule="+payModule+"&payAmount="+payAmount+"&payApiUrl="+JSON.stringify(payApiUrl)+"&payData="+JSON.stringify(payData)
			});
		}
	}
};
</script>

<style lang="less">
	page {
		background: #F5F5F5;
		height: 100%;
		width: 100%;
		margin: 0 auto;
		box-sizing: border-box;
	}
	
	.bg {
		margin: 0 auto;
		padding: 0 30rpx;
		padding-top: 34rpx;
		background-color: #FFFFFF;
	}
	
	.content {
		overflow-x: hidden;
	}
	.card {
		background-image: url(/static/images/waterCoupon/card.png);
		width: 690rpx;
		height: 260rpx;
		background-size: cover;
		display: flex;
	.left {
		width: 60%;
		height: 100%;
		display: flex;
		align-items: center;
		padding-left: 56rpx;
		.price {
			color: white;
			font-weight: bold;
			font-size: 56rpx;
		}
		.detail {
			margin-top: 20rpx;
			color: white;
			font-size: 26rpx;
		}
	}
	.right {
		width: 40%;
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		padding-right: 55rpx;
		.btn {
			color: white;
			font-size: 20rpx;
			width: 114rpx;
			height: 40rpx;
			// border: 1rpx solid #fff;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			white-space: nowrap;
			margin-bottom: 18rpx;
			
			&.borderOneRpx:after {
				border-width: 4rpx;
				border-radius: 40rpx;
				border-color: #FFFFFF;
			}
		}
	}
}
.title {
	height: 155rpx;
	color: #333333;
	font-size: 30rpx;
	font-weight: bold;
	width: 690rpx;
	border-bottom: 1rpx solid #eeeeee;
	padding-top: 86rpx;
}	
.block {
	height: 124rpx;
	border-bottom: 1rpx solid #eeeeee;
	display: flex;
	align-items: center;
	width: 690rpx;
	.name {
		font-size: 26rpx;
		width: 203rpx;
		padding-left: 10rpx;
		text {
			font-size: 34rpx;
			font-weight: bold;
		}
	}
	.name-c {
		color: #666666;
		font-size: 26rpx;
		width: 168rpx;
		padding-left: 10rpx;
	}
	.send {
		width: 237rpx;
		color: #d21728;
		font-size: 26rpx;
	}
	.send-c {
		width: 380rpx;
		height: 76rpx;
		color: #333;
		font-size: 26rpx;
		background-color: #F5F5F5;
		border-radius: 5rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		input{
		  width: 307rpx;
		  font-size: 26rpx;
		}
	}
	.img {
		width: 250rpx;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		image {
			width: 44rpx;
			height: 44rpx;
			margin-right: 3rpx;
		}
		view{
			color: white;
			font-size: 20rpx;
			width: 118rpx;
			height: 36rpx;
			border-radius: 18rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #FF7E00;
			white-space: nowrap;
			margin-right: 32rpx;
		}
	}
}

	.add-btn {
		z-index: 95;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 600rpx;
		height: 90rpx;
		font-size: 33rpx;
		color: #fff;
		background: linear-gradient(135deg,rgba(210,23,40,1) 0%,rgba(209,4,152,1) 100%);
		border-radius: 45rpx;
		margin-top: 137rpx;
	}
	.tip{
		color: #999999;
		font-size: 24rpx;
		width: 100%;
		text-align: center;
		margin-top: 26rpx;
		text{
			color: #E01327;
		}
	}
	
	
	/* 单行容器 */
	.oneItem-Container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		margin: 0 auto;
		margin-top: 21rpx;
		padding: 0 30rpx;
		width: 100%;
		height: 100rpx;
		background: #ffffff;
		border-radius: 14rpx;
		
		.item-label {
			width: 130rpx;
			height: 104rpx;
			line-height: 104rpx;
			font-size: 26rpx;
			font-family: Microsoft YaHei;
			// font-weight: 400;
			color: #666666;
		}
		
		.item-operate {
			height: 104rpx;
			line-height: 104rpx;
			font-size: 28rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #666666;
		}
	}
	
	
	/* 发票信息 */
	.invoice-Container {
		align-items: center;
		
		.item-operate {
			margin-left: auto;
		}
		
		.invoiceTitle {
			max-width: 450rpx;
		}
	}
	

	//选择发票
	.selectInvoice-Container {
		display: flex;
		align-items: center;
		margin-left: auto;
		
		.unSelectText {
			margin-right: 16rpx;
			font-size: 26rpx;
			color: #333333;
		}
		.selectedText {
			color: #E01327;
		}
		
		.selectInvoice {
			width: 10rpx;
			height: 16rpx;
		}
	}
</style>



